<template>
	<sl-page title="地址">
		<z-paging ref="paging" :paging-style="{'margin-top':top + 'px'}" v-model="addressList" @query="loadPage">
			<List :listDatas="addressList" @list:click="onSelectAddress">
				<template v-slot="{ item }">
					<view class="address" @click="onSelectAddress(item)">
						<view class="address-left">
							<image   class="check-agreement" :class="{'checked': item.isSelected}"></image>
						</view>
						<view class="address-center">
							<view class="areaName-item">
								{{ item.areaName }}
							</view>
							<view class="f-w py-1">
								{{ item.address }}
							</view>
							<view class="flex">
								<view class="f-w">{{ item.consignee }}</view>
								<view class="px-1 areaName-item">{{ item.phone }}</view>
								<view class="center-default" v-if="item.isDefault == 1">
									默认
								</view>
							</view>
						</view>
						<view class="address-right">
							<view class="" @click.stop="handleUpdate(item.id)">
								<image class="custom-icon" src="../static/icon-bianji.svg"></image>
							</view>
						</view>
					</view>
				</template>
			</List>
		</z-paging>
		<sl-flooter>
			<view class="btn-primary" @click="handleCreate()">新建收货地址</view>
		</sl-flooter>
	</sl-page>
</template>

<script>
	import * as Util from '@/utils/index.js';
	import AddressApi from '@/api/address/address.js';
	import Constants from '@/constants';
	import List from '@/pages/components/list/list.vue';

	export default {
		//
		mixins: [Constants],
		//
		components: {
			List
		},
		//
		data() {
			return {
				//当前页面参数
				options: {},
				addressList: [],
				//默认收货地址
				defaultId: '',
				//是否可以执行选择地址方法
				isSelectAddress: false,
				top:0
			};
		},
		//
		onLoad(options) {
			this.options = options;
			console.log('options',options)
			//初始化参数
			this.initPara();
			this.top = this.CustomBar +10 ;
		},
		//
		onShow() {},
		//
		methods: {
			//
			initPara() {
				this.isSelectAddress = this.options.isSelectAddress ? this.options.isSelectAddress : false;
			},
			//加载地址列表
			loadPage: async function() {
				try {
					let res = await AddressApi.query(this.query, this.param);
					await this.getDefaultId();
					if (this.defaultId) {
						res = this.handleSort(res);
					}
					if(this.options.areaId){
						res = this.getSelectAdress(res);
					}
					console.log(res,'res')
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					this.$refs.paging.complete(false);
				}
			},
			getSelectAdress(res){
				res.obj.data = res.obj.data.map((item, index) => {
					if (item.areaId === this.options.areaId) {
						item.isSelected = true;
					}
					return item
				});
				return res
			},
			//获取默认地址
			getDefaultId: async function() {
				let res = await AddressApi.get_def();
				if (res.obj && !Util.isEmptyObject(res.obj)) {
					//赋值
					this.defaultId = res.obj.id;
					return res.obj;
				}
				return {};
			},
			//将默认地址排在第一位
			handleSort(res) {
				let obj = {};
				res.obj.data.map((item, index) => {
					if (item.id === this.defaultId) {
						obj = item;
						res.obj.data.splice(index, 1)[0];
						return;
					}
				});
				res.obj.data.unshift(obj);
				return res;
			},
			/**
			 * 添加地址
			 */
			handleCreate() {
				this.$app.navTo(this.pages.addressCreatePage);
			},
			/**
			 * 编辑地址
			 * @param {int} id 收货地址ID
			 */
			handleUpdate(id) {
				this.$app.navTo(this.pages.addressUpdatePage, {
					id
				});
			},
			//确定订单页面选择地址
			onSelectAddress(item) {
				if (!this.isSelectAddress) {
					return
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.getAddressCallback(item); //重点$vm
				this.$app.navTo(this.pages.checkoutIndexPage);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.address {
		display: flex;
		font-size: $uni-font-size-base;
		height: 184rpx;
		padding-top: 24rpx;

		.address-left {
			display: flex;
			flex-basis: 10%;
			justify-content: center;
			align-items: center;
			padding-right: 20rpx;
			.check-agreement{
				background: #FFF;
				position: relative;
				border-radius: 50%;
				width: 34rpx;
				height: 34rpx;
				display: inline-block;
				border: 1rpx solid #ACACAC;
				&.checked {
					border: 1rpx solid #FFF;
					background-image: url("@/static/checked.png");
					background-repeat: no-repeat;
					/* 控制图片不重复 */
					background-size: cover;
					/* 调整图片大小以适应div尺寸 */
					/* 可选：以下属性用于对齐和定位图片 */
					background-position: center center;
					/* 居中对齐 */
					
				}
			}
			
		}

		.address-center {
			flex-basis: 80%;
			.areaName-item{
				color: #666666;
			}
			.center-default {
				display: inline-flex;
				padding: 0px 8rpx;
				justify-content: center;
				align-items: center;
				gap: 20rpx;
				border-radius: 76rpx;
				background: #FFA133;
				color: #FFF;
				font-size: 20rpx;
				font-weight: 500;
			}
		}

		.address-right {
			flex-basis: 10%;
		}
	}
</style>